<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Document</title>
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./lib/lib/css/animate.min.css">
</head>
<style type="text/css">
	#canvas {
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		display: block;
		margin: auto;
	}

	body {
		margin: 0;
		/*给body设置背景*/
		background: url(./images/planet.jpeg)no-repeat;
		background-size: 100% 100%;
		height: 100vh;
	}
</style>
</head>

<body>
	<script>
		var audio = document.querySelector('audio')
	</script>
	<div class="restart">
		<h1>你挂了</h1>
		<div class="restart-btn animate__animated animate__heartBeat animate__infinite">再来一局</div>
		<div class="restart-btn1 animate__animated animate__heartBeat animate__infinite">退出</div>
	</div>


	<div class="start">
		<h1 class=" animate__animated animate__heartBeat animate__infinite">飞机大战</h1>
		<div class="start-btn" difficulty=1>新手村</div>
		<div class="start-btn1" difficulty=2>学徒</div>
		<div class="start-btn2" difficulty=4>出师</div>
		<div class="start-btn3" difficulty=6>大师</div>
	</div>
	 <script src="https://unpkg.com/live2d-widget/lib/L2Dwidget.min.js"></script>
<script src="https://unpkg.com/live2d-widget/lib/L2Dwidget.0.min.js"></script>
<script>
　　L2Dwidget.init({ 
　　"model": {jsonPath:"https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json","scale": 1 }, 
　　"display": { "position": "left", "width": 150, "height": 300,"hOffset": 1300, "vOffset": 100 }
  });
  // display: { -->
	 // // 	position: "left",//设置看板娘的上下左右位置
// // 	width = 150,
// // 	height= 300,
// // 	hOffset=0,
// // 	vOffset= -20
// //};   -->
	 </script>
	<canvas id="canvas">
		您的浏览器不支持canvas
	</canvas>
	<script src="./js/setting.js"></script>
	<script src="./js/sprite.js"></script>
	<script src="./js/utils.js"></script>>
	<script src="./lib/lib/js/jquery.min.js"></script>
	<!--<audio src = "./飞机大战项目素材/audio/bgm.mp3" controls muted loop></audio>-->
	<script src="./js/sound.js"></script>

	<script>
		window.onload = function () {
			var canvas = document.querySelector('#canvas')
			var ctx = canvas.getContext('2d')
			var FPS = 24
			//计数器 用来统计游戏进行了多少给定时器间隔



			//  通过jquery获取 重新开始的盒子

			var $restart = $('.restart').hide()
			$('.restart-btn').on('click', function () {

				initGame()
				$restart.hide()
			})
			var $restart = $('.restart').hide()
			$('.restart-btn1').on('click', function () {

				initGame()
				$restart.hide()
				window.history.back();
				window.location.reload();
			})

			$('.start-btn').on('click', function () {
				initGame()
				difficulty = $(this).attr('difficulty')
				// BGM.play()
				$('.start').hide()
			})

			$('.start-btn1').on('click', function () {
				initGame()
				difficulty = $(this).attr('difficulty')
				// BGM.play()
				$('.start').hide()
			})

			$('.start-btn2').on('click', function () {
				initGame()
				difficulty = $(this).attr('difficulty')
				// BGM.play()
				$('.start').hide()
			})

			$('.start-btn3 ').on('click', function () {
				initGame()
				difficulty = $(this).attr('difficulty')
				// BGM.play()
				$('.start').hide()
			})
			

			var count = 0;
			var score = 0;
			var difficulty = 1//难度
			canvas.width = WIDTH
			canvas.height = HEIGHT
			//敌机数组，用来批量管理敌机，放敌机对象
			//var player1List = []
			//var player1List = new ObjList()

			var bulletList = new ObjList()


			var player1List = new ObjList()


			var explosionList = new ObjList()



			var boomList = new ObjList()

			var player1BulletList = new ObjList();

			//    var player1List = [];

			//执行了玩家player初始化操作 ：鼠标事件的绑定
			player.init(canvas);

			// function  generateBullet(){

			// }
			// function generatePlayer1(){

			// }
			//间隔定时器来实现 动画
			// var explosion = new Explosion(200,200,80,60)
			//

			//  初始游戏的数据
			function initGame() {
				player.isLiving = true
				score = 0
				// enemyList.data = []
				// bulletList.data = []
				// exposionList.data = []
				player1List.clear()
				bulletList.clear()
				explosionList.clear()
			}

			//  生成一个boss对象
			var boss = new Boss();

			function checkBossCollide() {
				// 1. 玩家的子弹 击中boss boss掉血
				var result = isCollideOneAndGroup(boss, bulletList.data);
				if (result) {
					bulletList.recycle(result);
					player1BulletList.data.push(
						new Explosion(result.x, result.y - boss.height / 2, 100, 80)
					);

					console.log(boss.HP);
					boss.HP = boss.HP - 10;

					if (boss.HP < 500) {
						boss.dying(explosionList)
					}


					if (boss.HP <= 0) {
						boss.show = false;
						for (var i = 0; i < 10; i++) {
							boss.dying(explosionList)
						}
					}
				}

				// 2. boss的子弹击中玩家
				var result2 = isCollideOneAndGroup(player, player1BulletList.data)

				if (result2) {
					console.log('玩家被击中了！')
					player1BulletList.recycle(result2)
				}

				// 3. boss和玩家的体积碰撞
				if (isCollide(player, boss)) {
					player.isLiving = false
					explosionList.data.push(new Explosion(player.x, player.y, 100, 80))
					// player.isLiving=false
					$restart.show()
				}
			}

			function checkCollide(){
//如果玩家是活的 就做玩家碰撞检测
if (player.isLiving) {
					//检测玩家有没有与敌机发生碰撞
					var result = isCollideOneAndGroup(player, player1List.data);

					//如果发生碰撞，就把飞机回收掉



					if (result) {
						player1List.recycle(result);
						explosionList.data.push(new Explosion(result.x, result.y, PLAYER2_WIDTH, PLAYER2_HEIGHT)
						)
						//player.isLiving = false;
						player.isLiving = false;
						$restart.show()

						explosionList.data.push(new Explosion(result.x, result.y, 100, 80))
					}


					//检测  子弹数组 和 敌机数组之间的碰撞

					var result2 = isCollideByGroup(bulletList.data, player1List.data)

					//把发生碰撞的子弹回收掉
					if (result2[0] && !result2[0].isPersist) {
						bulletList.recycle(result2[0])
					}
					//把被击落的敌机 回收掉
					if (result2[1]) {
						//创建爆炸声音
						boomList.data.push(new Boom(boomList))
						score += 2;
						player1List.recycle(result2[1])

						explosionList.data.push(new Explosion(result2[1].x, result2[1].y, PLAYER2_WIDTH, PLAYER2_HEIGHT))
					}

				}
			}
			var timer = setInterval(function () {
				//清除上移帧画面
				count++;
				ctx.clearRect(0, 0, WIDTH, HEIGHT)
				background.draw(ctx)
				background.move()
				player.draw(ctx)

				// explosion.draw(ctx)
				// explosion.move()

				if (player.isLiving) {
					generateBullet();
					generateplayer1();
				}


				//  只有得分是100的倍数时， boss才出场
				if (score > 0 && score % 100 === 0) {
					boss.HP = 1000
					boss.x = WIDTH / 2 - 125;
					boss.y = -250;
					boss.show = true
				}

				//  如果boss出场了敌机就不要显示
				if (!boss.show) {
					generateplayer1();
				}


				//  如果玩家是活着的 就做玩家碰撞检测
				if (player.isLiving) {
					checkCollide();
				}

				// 只有玩家是活着的，我们才绘制玩家
				if (player.isLiving) {
					player.draw(ctx);
				}

				//播放爆炸的声音
				boomList.data.forEach(function (boom) {
					boom.play();
				});

				if (boss.show) {
					// 把boss画到画布上
					boss.draw(ctx);
					boss.move();

					console.log(boss.show)
					//  让boss发射子弹
					if (count % 20 === 0) {
						boss.fire(player1BulletList);
					}

					if (player.isLiving) {
						checkBossCollide();
					}

					// 绘制boss和敌机发射的子弹
					player1BulletList.data.forEach(function (bullet) {
						bullet.draw(ctx);
						bullet.move(player1BulletList);
					});
				}





				
				explosionList.data.forEach(function (explosion) {
					explosion.draw(ctx), explosion.move(explosionList)
				});
				//只有玩家是活的， 我们才绘制玩家

				if (player.isLiving) {
					player.draw(ctx);
				}
				boomList.data.forEach(function (boom) {
					boom.play()

				})


				function generateBullet() {
					if (count % 10 === 0)
						bulletList.data.push(new Bullet(player.x + player.width / 2 - BULLET_WIDTH / 2, player.y, BULLET_WIDTH, BULLET_HEIGHT,
							bg4, BULLET_SPEED))
					bulletList.data.push(new Bullet(player.x + player.height / 2 + BULLET_HEIGHT / 2, player.y, BULLET_WIDTH, BULLET_HEIGHT,
						bg4, BULLET_SPEED))

					bulletList.data.forEach(function (bullet) {
						bullet.move(bulletList)
						bullet.draw(ctx)
					})
				}
				// Player1.move()
				// Player1.draw(ctx)
				//定时器
				function generateplayer1() {
					if (count % parseInt(PLAYER2_FREQUENT / difficulty) === 0) {
						player1List.data.push(new Player1(Math.random() * ((WIDTH-100)-10)+10, -PLAYER2_HEIGHT * difficulty))
					}

					//遍历一下playerList数组
					//    for(var i = 0; i<player1List.length; i++){
					// 	   player1List[i].move()
					// 	   player1List[i].draw(ctx)
					//    }

					player1List.data.forEach(function (player1) {
						player1.move(player1List)
						player1.draw(ctx)
					})
				}
				ctx.font = "20px 宋体";
				ctx.textBaseline = 'top';
				ctx.fillStyle = '#fff';
				ctx.fillText(`得分：${score}`, 0, 0)

				// 绘制爆炸对象
				player1BulletList.data.forEach(function (player1Bullet) {
					player1Bullet.draw(ctx);
					player1Bullet.move(player1BulletList);
				});
			}, 1000 / FPS);
		};
			// console.log(player1List.data)

	</script>
</body>

</html>